<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
      <el-breadcrumb-item>录用教师</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-card style="width: 600px;height: 1100px;margin: 0 auto;border: 1px solid black"><!--卡片-->
      <el-form label-width="80px"> <!--Element组件中的表单-->
        <el-form-item label="姓名:">
          <el-input type="text" v-model="t.name"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <template>
            <el-radio v-model="t.gender" label=男></el-radio>
            <el-radio v-model="t.gender" label=女></el-radio>
          </template>
        </el-form-item>
        <el-form-item label="年龄:">
          <el-input type="text" v-model="t.age"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input type="text" v-model="t.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:">
          <el-input type="text" v-model="t.number"></el-input>
        </el-form-item>
        <el-form-item label="教龄:">
          <el-input type="text" v-model="t.seniority"></el-input>
          <el-dropdown @command="handleCommandSeniority">
  <span class="el-dropdown-link">
    选择时间<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="2年以内">2年以内</el-dropdown-item>
              <el-dropdown-item command="3-5年">3-5年</el-dropdown-item>
              <el-dropdown-item command="6-9年">6-9年</el-dropdown-item>
              <el-dropdown-item command="10-15年">10-15年</el-dropdown-item>
              <el-dropdown-item command="15年-20年">15年-20年</el-dropdown-item>
              <el-dropdown-item command="20年以上">20年以上</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="教学科目:">
            <el-select v-model="t.courseId" clearable placeholder="请选择">
              <el-option
                  v-for="item in courseListOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                <span style="font-size: 15px; font-weight: bold ; float: left">{{ item.name }}</span>
                <span style="font-size: 15px; font-weight: bold ; float: right">{{ item.id }}</span>
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="教学班级:">
          <el-input type="text" v-model="t.grade"></el-input>
        </el-form-item>
        <el-form-item label="教师级别:">
          <el-input type="text" v-model="t.level">{{t.level}}</el-input>
          <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    选择级别<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="三级教师">三级教师</el-dropdown-item>
              <el-dropdown-item command="二级教师">二级教师</el-dropdown-item>
              <el-dropdown-item command="一级教师">一级教师</el-dropdown-item>
              <el-dropdown-item command="高级教师">高级教师</el-dropdown-item>
              <el-dropdown-item command="正高级教师">正高级教师</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-date-picker
              v-model="t.created"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="职工ID:">
          <span>(邮编315+入职年号+入职月份+入职天号)</span>
          <el-input @blur="f()" type="text" v-model="t.jobId"></el-input>{{info}}
        </el-form-item>
        <el-form-item label="上传头像:">
          <!--当上传成功后调用handleSuccess这个方法-->
          <el-upload
              action="http://localhost:9800/upload"
              name="pic"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button style="margin: 0 0 0 20px"
                     type="primary" @click="insert()">录用教师
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      t: {
        name: '',
        age: '',
        address: '',
        number: '',
        seniority: '',
        courseName: '',
        grade: '',
        created: '',
        url:'',
        level: '',
        jobId: '',
        gender:'',
        courseId:''
      },
      courseListOptions:[],
      info:''
    };
  },
  methods: {
    f(){
      let url = "http://localhost:9800/teacher/selectToBlur/"+this.t.jobId
      this.axios.post(url).then((response)=>{
        if (response.data==1){
          this.info="该工号可用!"
        }else {
          this.info="该工号已存在!"
        }
      })
    },
    insert(){
      let url = "http://localhost:9800/teacher/insert"
      //将formData对象转换成FormData格式,当后端不添加@RequestBody注解时接收    {indices、brackets、repeat}数组格式
      this.axios.post(url,this.t).then((response)=>{
        let responseBody = response.data;
        console.log(responseBody.data)
        if (responseBody.state ==20000){
          //跳转到管理页面
          this.$message.success("添加成功!")
          this.$router.push("/")
        }else {
          this.$message.error(responseBody.message)
        }
      })
    },
    // 加载课程信息
    loadCourseList(){
      let url = 'http://localhost:9800/course';
      this.axios.get(url).then((response)=>{
        let responseBody = response.data;
        if (responseBody.state == 20000){
          this.courseListOptions = responseBody.data;
        }else {
          this.$message(responseBody.message);
        }
      })
    },
    handleSuccess(response, file, fileList) {//图片上传成功后接收图片的url
      //response代表服务器响应的图片路径
      this.t.url = response
      console.log(this.t.url )
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //发出删除图片的请求
      let url = 'http://localhost:9800/remove?url='+this.t.url
      this.axios.get(url).then((response)=>{
        this.$message.success("服务器图片删除完成");
        this.t.url='';
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleCommand(command){
      this.t.level = command;
    },
    handleCommandSeniority(command){
      this.t.seniority = command;
    },
  },
  mounted() {
    this.loadCourseList();
  }
}
</script>